<template>
  <basic-container>
    <div class="container-body">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="机构编码">
          <el-input size="small" v-model="query.dealSerial" placeholder="机构编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input size="small" v-model="query.dealSerial" placeholder="单位名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch" :loading="loading">搜索
          </el-button>
          <el-button size="small" icon="el-icon-delete" @click="searchReset" :loading="loading">清空</el-button>
        </el-form-item>
      </el-form>
      <div class="btn-operate">
        <el-button @click="showAddView" type="primary" size="small" icon="el-icon-plus">
          新增
        </el-button>
        <el-button @click="showEditBox" type="primary" size="small" icon="el-icon-plus">
          修改
        </el-button>
        <el-button @click="showMove" type="primary" size="small" icon="el-icon-plus">
          删除
        </el-button>
      </div>
      <el-table header-row-class-name="container-table-header" :data="data" size="small" style="width: 100%;margin-bottom: 20px;"
                row-key="id" border stripe v-loading="loading" @selection-change="handleSelectionChange" @row-click="showViewBox">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="dealSerial" label="控制点编码">
        </el-table-column>
        <el-table-column prop="dealSerial" label="控制层面">
        </el-table-column>
        <el-table-column prop="dealSerial" label="业务流程">
        </el-table-column>
        <el-table-column prop="dealSerial" label="子流程">
        </el-table-column>
        <el-table-column prop="dealSerial" label="控制点状态">
        </el-table-column>
      </el-table>
      <div class="container-page">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="formTitle" fullscreen custom-class="ledger" :visible.sync="formBox" :close-on-click-modal="!formBox" :append-to-body="true" :before-close="resetForm" width="1200px" top="5vh">
      <el-form ref="optForm" :model="form" label-width="140px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="编制人" prop="renterName">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="form.renterName" disabled></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button @click="showUserDialog(['renterName', 'renterId'], 'user')">请选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="编制部门" prop="renterName">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="form.renterName" disabled></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button @click="showUserDialog(['renterName', 'renterId'], 'department')">请选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="renterName">
              <el-radio-group v-model="form.resource">
                <el-radio label="启用"></el-radio>
                <el-radio label="停用"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="控制层面" prop="renterName">
              <el-select v-model="form.value1" clearable filterable placeholder="请选择" style="width: 100%;">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务流程" prop="renterName">
              <el-select v-model="form.value2" clearable filterable placeholder="请先选择" style="width: 100%;" @change="optionsChange">
                  <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="子流程" prop="renterName">
              <el-select v-model="form.value2" clearable filterable placeholder="请先选择[控制层面]" style="width: 100%;">
                  <el-option
                    v-for="item in options3"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="发布日期" prop="renterName">
              <el-row>
                <el-date-picker
                  v-model="value2"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="修改日期" prop="renterName">
              <el-date-picker
                v-model="value2"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="修订人" prop="renterName">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="form.renterName" disabled></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button @click="showUserDialog(['renterName', 'renterId'], 'user')">请选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="详细内容" :name="1">
            <el-row>
              <el-form-item label="控制目标" prop="renterName">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="控制点" prop="renterName">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="控制点说明" prop="renterName">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="审计程序与方法" prop="renterName">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="涉及的会计科目" prop="renterName">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="涉及的信息系统" prop="renterName">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.textarea">
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="依据的法律法规" prop="renterName">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.textarea">
                </el-input>
              </el-form-item>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="small" icon="el-icon-close">关闭</el-button>
        <el-button v-if="!isView" type="primary" @click="submit" size="small" icon="el-icon-check">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog title="查看" fullscreen custom-class="ledger" :visible.sync="viewBox" :close-on-click-modal="!viewBox"
               :append-to-body="true" :before-close="resetForm" width="1200px" top="5vh">
      <el-descriptions title="" :labelStyle="{'width': '90px'}">
        <el-descriptions-item label="编制人">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="编制部门">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ form.renterName ? '启用' : '禁用' }}</el-descriptions-item>
        <el-descriptions-item label="控制层面">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="业务流程">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="子流程">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="发布日期">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="修订日期">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="修订人">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="控制目标" :span="3">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <div class="title">详细内容</div>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="控制目标" :span="3">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="控制点" :span="3">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="控制点说明" :span="3">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="审计程序与方法" :span="3">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="涉及的会计科目" :span="3">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="涉及的信息系统" :span="3">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="依据的法律法规" :span="3">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="small" icon="el-icon-close">关闭</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import {mapGetters} from "vuex";
import Tinymce from '@/components/Tinymce';
import print from 'vue-print-nb';
import FormTransfer from "@/components/form/transfer";
import {fetchList,getObj,delObj,submit} from "@/api/adis/base/auditedCompany";

export default {
  directives: {
    print
  },
  components: {
    Tinymce,
    FormTransfer
  },
  dictTypes: ['pay_type', 'deal_type', 'resource_usage'],
  data() {
    return {
      ls:{
        'background': 'white'
      },
      importBox: false,
      isEdit: false,
      isView: false,
      viewBox: false,
      formBox: false,
      formTitle: '',
      loading: false,
      query: {},
      form: {
        freeRentMonth: 0,
        totalCopies: 4,
        jfCopies: 3,
        moneyRentDeposits: []
      },
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      data: [],
      printBox: false,
      print: {
        id: 'printArea',
        popTitle: '', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: '',
      },
      selectItem: [],
      selectionRow: [],
      options1: [{
        label: '公司层面',
        value: 1
      }, {
        label: '业务流程层面',
        value: 2
      }, {
        label: 'IT控制层面',
        value: 3
      }],
      options2: [{
        label: '内部环境',
        value: 1
      }, {
        label: '风险评估',
        value: 2
      }, {
        label: '控制活动',
        value: 3
      }, {
        label: '信息和沟通',
        value: 4
      }, {
        label: '内部监督',
        value: 5
      }],
      options3: []
    }
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  created() {
    this.onLoad(this.page);
  },
  methods: {
    optionsChange(e) {
      if (e) {
        this.options3 = [{label: '第'+e+'个', value: e}]
      } else {
        this.options3 = []
      }
    },
    handleSelectionChange(row) {
      this.selectionRow = row
    },
    submit() {
      this.$refs['optForm'].validate((valid) => {
        if (valid) {
          this.loading = true;
          submit(this.form).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.resetForm();
            this.onLoad(this.page);
          }, () => {
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    toAudit() {
      this.$refs['optForm'].validate((valid) => {
        if (valid) {
          this.loading = true;
          toAudit(this.form).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.resetForm();
            this.onLoad(this.page);
          }, () => {
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    handleComputeRentWithHeadDay() {
      this.$refs['optForm'].validate((valid) => {
        if (valid) {
          this.loading = true;
          computeDepositWithHeadDay(this.form).then((res) => {
            this.form.moneyRentDeposits = [];
            //this.form.moneyRentDeposits[0] = res.data.data;
            this.$set(this.form.moneyRentDeposits, 0, res.data.data)
          }, () => {
          });
          computeRentWithHeadDay(this.form).then((res) => {
            //this.form.moneyRentMusts = res.data.data;
            this.$set(this.form, 'moneyRentMusts', res.data.data)
          }, () => {
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    doGenDealLocation() {
      let houseResourceIds = [];
      for(let t of this.form.dealHouseResources) {
        houseResourceIds.push(t.houseResourceId);
      }
      genDealLocation({houseResourceIds: houseResourceIds}).then((res) => {
        this.$set(this.form, 'location', res.data.data)
      }, () => {

      });
    },
    showAddView() {
      this.formTitle = '新增';
      this.formBox = true;
      this.form = {
        freeRentMonth: 0,
        totalCopies: 4,
        jfCopies: 3,
        moneyRentDeposits: [
          {
            changeType:1
          }
        ]
      };
    },
    showEditBox() {
      if (this.selectionRow.length === 1) {
        getObj(this.selectionRow.id).then((res) => {
          this.form = res.data.data;
          this.formTitle = '编辑';
          this.formBox = true;
          this.isEdit = true;
        });
      } else {
        this.$message({
          type: "warning",
          message: "请选择一条记录!"
        });
      }
    },
    showViewBox(row) {
      getObj(this.selectionRow.id).then((res) => {
        this.form = res.data.data;
        this.viewBox = true;
        this.isView = true;
      });
    },
    showMove() {
      if (this.selectionRow.length > 0) {
        let ids = []
        this.selectionRow.forEach(element => {
          ids.push(element.id)
        });
        getObj(ids.join(',')).then((res) => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.onLoad(this.page);
        });
      } else {
        this.$message({
          type: "warning",
          message: "请选择记录!"
        });
      }
    },
    showPrintBox(row) {
      getObj(row.dealId).then((res) => {
        this.form = res.data.data;
        this.printBox = true;
        this.isView = true;
      });
    },
    handleCancel(row) {
      this.$confirm("确定将选择的合同作废?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return delObj(row.dealId);
      })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    resetForm() {
      this.formBox = false;
      this.viewBox = false;
      this.isEdit = false;
      this.isView = false;
      this.form = null;
      this.formTitle = '';
      this.$refs['optForm'] && this.$refs['optForm'].resetFields();
      this.viewBox = false;
      this.printBox = false;
    },
    onSearch() {
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.current = 1;
      this.onLoad(this.page);
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      fetchList(Object.assign(params, this.query, page)).then(res => {
        this.loading = false;
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
      }, () => {
        this.loading = false;
      });
    },
    closePrintDialog() {
      this.printBox = false;
    },
    ransferDataHandle(e) {
      this.transferDialog = false
      let currentval = [], currentLabel = []
      if (e.list.length > 1) {
        e.list.forEach(item => {
          currentval.push(item.id)
          currentLabel.push(item.label)
        })
      } else {
        currentval = [e.list[0].id]
        currentLabel = [e.list[0].label]
      }
      this.$set(this.form, this.userTypeArr[0], currentLabel.join(','))
      this.$set(this.form, this.userTypeArr[1], currentval.join(','))
    },
  }
};
</script>

<style>
</style>
